<template>
	<div class="container">
		<div class="all">
			<div class="text">{{panelData.title}}</div>
			<div class="description">
				<p>{{panelData.description}}</p>
			</div>
			<div class="bottom">
				<Icon type="md-time" /><span>{{panelData.created_at}}</span>
				<Icon type="md-chatboxes" style="margin-left: 30px;"/><span>{{panelData.comments_times}}条评论</span>
				<Icon type="ios-eye" style="margin-left: 30px;"/><span>{{panelData.read_times}}次阅读</span>
				<Icon type="ios-thumbs-up" style="margin-left: 30px;"/><span>{{panelData.thumb_up_times}}人点赞</span>
			</div>
			<div class="img-responsive">
				<img class="panel-img" :src="panelData.cover_url">
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name: 'Panel',
		props: ['panelData'],
		data(){
			return {
				title: "标题的名字是真的难起啊!",
				description: "本人这学期要准备实习面试，所以无法花太多时间去更新，所以更新进度慢还请见谅 感觉自己的基础和算法能力....",
				created_at : "2021-02-12",
				comments_times: 123,
				read_times: 1443,
				thumb_up_times: 18,
				cover_url: "https://blog.api.xiaoyou66.com/assets/images/background/img146.jpg" 
			}
		}
	}
</script>

<style scoped>
.all{
	position: relative;
	cursor: pointer;
}

.text{
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 25px;
	transition: 0.3s;
    white-space: nowrap;
}

.description{
	position: absolute;
	bottom: 15%;
	color: rgba(255,255,255,0);
	z-index: 2;
	font-size: 16px;
	transition: 0.3s
}

.description p{
	padding: 5px 30px;
}

.bottom{
	width: 100%;
	position: absolute;
	bottom:  5%;
	color: rgba(255,255,255,0);
	z-index: 2;
	font-size: 14px;
	padding: 5px 30px;
	border-top: 1px solid rgba(255,255,255,0);
	transition: 0.3s;
}

.container{
	width: 100%;
	/*background-color: #fff;*/
	border-radius: 10px;
}

.img-responsive{
	max-width: 100%;
	overflow: hidden;
	transition: 0.3s;
}

.panel-img{
	width: 100%;
	background-position: 50% 50%;
	background-size: cover;
	height: 400px;
	margin: auto;
	text-align: center;
	transition: 0.3s;
}

.all:hover .text{
	font-size: 30px;
	top: 40%;
	text-shadow: .2rem 0rem .5rem white;
}

.all:hover .panel-img{
	transform: scale(1.15);
}

.all:hover .img-responsive{
	filter: blur(2px);
	-webkit-filter: blur(2px);  /* chrome, opera */
	-ms-filter: blur(2px);
	-moz-filter: blur(2px);
}

.all:hover .description{
	bottom: 10%;
	color: rgba(255,255,255,1);
}

.all:hover .bottom{
	bottom: 0%;
	color: rgba(255,255,255,1);
	border-top: 1px solid rgba(255,255,255,0.5);
}

</style>